<template>
  <page-header-wrapper :title="false">
    <a-card>
      <a-spin :spinning="loading">
        <a-descriptions title="送达记录详情" bordered>
          <a-descriptions-item label="案号">
            <div class="beyond_hiding">{{ arriveInfo.acceptcode ? arriveInfo.acceptcode : '暂无数据' }}</div>
          </a-descriptions-item>
          <a-descriptions-item label="送达人">
            <div class="beyond_hiding">{{ arriveInfo.sender ? arriveInfo.sender : '暂无数据' }}</div>
          </a-descriptions-item>
          <a-descriptions-item label="送达方式">
            <div class="beyond_hiding">{{ arriveInfo.sendway_text ? arriveInfo.sendway_text : '暂无数据' }}</div>
          </a-descriptions-item>
          <a-descriptions-item label="文书类型">
            <div class="beyond_hiding">{{ arriveInfo.noticetype_text ? arriveInfo.noticetype_text : '暂无数据' }}</div>
          </a-descriptions-item>
          <a-descriptions-item label="送达时间">
            <div class="beyond_hiding">{{ arriveInfo.arrivetime ? arriveInfo.arrivetime : '暂无数据' }}</div>
          </a-descriptions-item>
          <a-descriptions-item label="受送达人">
            <div class="beyond_hiding">{{ arriveInfo.recipientname ? arriveInfo.recipientname : '暂无数据' }}</div>
          </a-descriptions-item>
          <a-descriptions-item label="证件号/信用代码">
            <div class="beyond_hiding">{{ arriveInfo.cardno ? arriveInfo.cardno : '暂无数据' }}</div>
          </a-descriptions-item>
          <a-descriptions-item label="邮寄地址">
            <div class="beyond_hiding">{{ arriveInfo.addr ? arriveInfo.addr : '暂无数据' }}</div>
          </a-descriptions-item>
          <a-descriptions-item label="收件人">
            <div class="beyond_hiding">{{ arriveInfo.acceptname ? arriveInfo.acceptname : '暂无数据' }}</div>
          </a-descriptions-item>
          <a-descriptions-item label="电子邮件">
            <div class="beyond_hiding">{{ arriveInfo.mail ? arriveInfo.mail : '暂无数据' }}</div>
          </a-descriptions-item>
          <a-descriptions-item label="移动号码">
            <div class="beyond_hiding">{{ arriveInfo.tel ? arriveInfo.tel : '暂无数据' }}</div>
          </a-descriptions-item>
          <a-descriptions-item label="邮政编码">
            <div class="beyond_hiding">{{ arriveInfo.postcode ? arriveInfo.postcode : '暂无数据' }}</div>
          </a-descriptions-item>
          <a-descriptions-item label="其他联系方式">
            <div class="beyond_hiding">{{ arriveInfo.contactway ? arriveInfo.contactway : '暂无数据' }}</div>
          </a-descriptions-item>
          <a-descriptions-item label="邮寄单号">
            <div class="beyond_hiding">{{ arriveInfo.expresscode ? arriveInfo.expresscode : '暂无数据' }}</div>
          </a-descriptions-item>
          <a-descriptions-item label="">
          </a-descriptions-item>

          <a-descriptions-item label="邮寄进度">
            <div v-if="photoFileList && photoFileList.length > 0">

              <a-upload
                style="padding-left:20px"
                list-type="picture-card"
                :file-list="photoFileList"
                @preview="photoPreview"
              >
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="photoCancel">
                <img alt="photo" style="width: 100%" :src="previewImage" />
              </a-modal>

            </div>
          </a-descriptions-item>

        </a-descriptions>

        <a-col :xxl="24" :lg="24" :sm="24" style="margin-top:20px">
          <a-form-model-item style="text-align: center">
            <a-button @click="backRouter"> 返回 </a-button>
            <a-button type="primary" style="margin-left: 15px" @click="filePreview"> 预览文书 </a-button>
          </a-form-model-item>
        </a-col>
      </a-spin>
    </a-card>
  </page-header-wrapper>
</template>
  <script>
// import { getArriveInfoById } from '@/api/arrive/apl_arrive_record'
import { kkfilePreview } from '@/utils/util.js'
import { getUrl } from '@/api/base/file.js'
export default {
  data () {
    return {
      labelCol: { span: 8 }, // label宽
      wrapperCol: { span: 16 }, // 组件宽
      arriveId: '', // 送达id
      arriveInfo: {}, // 送达记录
      photoFileList: [], // 文件地址
      previewVisible: false,
      previewImage: ''
    }
  },
  created () {
    this.init()
  },
  components: {},
  methods: {
    init () {
      // 从路由中获取id，
      this.arriveId = this.$route.query.id
      this.onSearch()
    },
    handleCancel () {
      this.resetForm()
      this.modalVisible = false
    },
    // 查询数据

    backRouter () {
      if (this.$route.query.url) {
        if (this.$route.query.tabkey) {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.queryParam,
              tabkey: this.$route.query.tabkey
            }
          })
        } else {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.queryParam
            }
          })
        }
      } else {
        this.$router.go(-1)
      }
    },
    onSearch () {
      this.loading = true
      this.arriveInfo = {}
      // getArriveInfoById({ id: this.arriveId })
      //   .then(res => {
      //     this.loading = false
      //     if (res.code == 0) {
      //       const resObj = res.data
      //       if (resObj != null && resObj != undefined) {
      //         this.arriveInfo = resObj
      //         // 查询当前的图片地址
      //         if (this.arriveInfo && this.arriveInfo.expressphoto && this.arriveInfo.expressphoto !== '') {
      //           const fileUrlList = this.arriveInfo.expressphoto.split(',')
      //           for (let index = 0; index < fileUrlList.length; index++) {
      //             const file = {
      //               uid: index,
      //               name: index,
      //               status: 'done',
      //               url: fileUrlList[index],
      //               flag: fileUrlList[index]
      //             }
      //             this.photoFileList.push(file)
      //           }
      //         }
      //       } else {
      //         this.$message.error('查询失败')
      //       }
      //     } else {
      //       this.$message.error('查询失败')
      //     }
      //   })
      //   .finally(() => {
      //     this.loading = false
      //   })
    },
    filePreview () {
      getUrl({ id: this.arriveInfo.noticecode }).then(res => {
        if (res.code == 0) {
          const fileUrl = res.data
          if (fileUrl == '' || fileUrl == null || fileUrl == undefined) {
            this.$message.error('当前文件的查看地址为空，无法查看')
          }
          console.log('文件预览', res.data)
          window.open(kkfilePreview(fileUrl))
        } else {
          this.$message.error('获取文件地址失败')
        }
      })
    },
    photoCancel () {
      this.previewVisible = false
    },
    photoPreview (file) {
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
  }
}
</script>

<style lang="less" scoped>
.beyond_hiding {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  max-width: 200px;
}

::v-deep .ant-descriptions-item-label {
  width: 10%;
}
::v-deep .ant-descriptions-item-content {
  width: 10%;
}
</style>
